<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-button @click="handleAdd">添加</el-button>
    </div>
    <!-- 资源分类数据 -->
    <el-table
      :data="categoryLists"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        label="添加时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createdTime | dateFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加和编辑操作 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <category-add-or-edit
      @success="onSuccess"
      @cancel="onCancel"
      :is-edit="isEdit"
      :category-id="categoryId"
      v-if="dialogVisible"></category-add-or-edit>
    </el-dialog>
  </el-card>
</template>

<script>
// 引入资源分类接口数据
import { getResourceCategory, deleteResource } from '@/services/resource.js'
import CategoryAddOrEdit from './CategoryAddOrEdit'

export default {
  components: {
    CategoryAddOrEdit
  },
  data () {
    return {
      categoryLists: [],
      dialogVisible: false,
      categoryId: '',
      isEdit: false
    }
  },
  created () {
    this.resourceCategoryList()
  },
  methods: {
    async resourceCategoryList () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.categoryLists = data.data
      }
    },
    // 删除按钮
    handleDelete (id) {
      this.$confirm('确认删除该资源分类', '删除提示')
        .then(async () => {
          const { data } = await deleteResource(id)
          if (data.code === '000000') {
            this.$message.success('删除成功')
            this.resourceCategoryList()
          }
        }).catch(err => {
          if (err && err.response) {
            this.$message.error('删除失败,请重试')
          } else {
            this.$message.info('取消删除')
          }
        })
    },
    handleAdd () {
      this.dialogVisible = true
    },
    onSuccess () {
      this.$message.success('添加资源分类成功')
      this.resourceCategoryList()
      this.dialogVisible = false
    },
    onCancel () {
      this.dialogVisible = false
    },
    // 编辑按钮
    handleEdit (category) {
      this.dialogVisible = true
      this.isEdit = true
      this.categoryId = category.id
    }
  },
  // 过滤器
  filters: {
    dateFormat (date) {
      date = new Date(date)
      return `
        ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
        ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
      `
    }
  }
}
</script>

<style lang='scss' scoped></style>
